<template>
    <div class="tableModel">
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column
                prop="authority_name"
                label="角色名称"
                align="center"
                width="205">
            </el-table-column>
            <el-table-column
                align="center"
                label="拥有主功能">
                <template slot-scope="props">
                    <ul class="menuList">
                        <li v-for="(item,index) in props.row.menu" :key="index" :class="{'noItem':item.is_auth == 0}">【{{item.menu_name}}】</li>
                    </ul>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="绑定人员">
                <template slot-scope="props">
                    <div class="adminList" v-if="props.row.id != 2 && props.row.id != 4 && props.row.id != 5">
                        <el-tag
                        v-for="(item,index) in props.row.admin_user"
                        :key="index"
                        :closable="!item.no_del"
                        @close="clearFn(item,props.row)"
                        >
                        {{item.admin_name}}
                        </el-tag>
                    </div>
                    <div v-else class="hintText">
                        {{props.row.id | getReturnText}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="操作"
                width="114">
                <template slot-scope="props">
                    <div class="button" v-if="props.row.id == 1 || props.row.id == 3" @click="addAdmin(props.row)">新增人员</div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {complexPicker} from "@/libs/utils" /**封装选部门方法 */
    import {getRoleListApi,removeAdmin,modifyAdmin} from "../api"
    export default {
        created(){
           this.getList()
        },
        data(){
            return {
                tableData:[]
            }
        },
        methods:{
            clearFn(item,props){
                this.$confirm(`即将移除"${props.authority_name} ${item.admin_name}", 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    removeAdmin({admin_userid:item.admin_userid,aaid:props.authority_type}).then(res=>{
                        this.getList();
                    })
                });
            },
            addAdmin(props){
                let that = this
                let arr = props.admin_user&&props.admin_user.length?props.admin_user.map(items=>{return items.admin_userid}):[]
                complexPicker(this,{bool:true,useridArr:[],maxUsers:1,disabledUsers:arr},function (res) {
                        modifyAdmin({users:JSON.stringify(res.users),aaid:props.authority_type})
                        .then((res)=>{
                             that.getList();
                        })
                })
            },
            getList(){
                getRoleListApi()
                .then((res)=>{
                    this.tableData = res
                    console.log(res)
                })
            }
        },
        filters:{
            getReturnText(params){
                 switch(params){
                     case 2:
                     return '默认全员，新入职同事24小时内更新';
                     case 4:
                     return '由主管理员在仓库配置里面指定';
                     case 5:
                     return '由仓库管理员在资产管理中指定';
                 }
            }
        }
    }
</script>

<style lang="scss">
.tableModel{
    padding: 30px;
    background: #fff;
    .el-table th{
        background-color: rgba(249, 249, 249, 1) !important;
        color: rgba(16, 16, 16, 1) !important;
        height: 50px !important
    }
    .el-table td{
        height: 90px !important;
        overflow: hidden;
        color: rgba(16, 16, 16, 1) !important;
    }
    .el-table td .cell{
        font-size: 12px !important;
    }
    .menuList{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        li{
            // width: 64px;
            // border-radius: 19px;
            // background-color: rgba(233, 243, 255, 1);
            color: rgba(56, 147, 255, 1);
            font-size: 12px;
            text-align: center;
            height: 28px;
            line-height: 30px;
            // border: 1px solid rgba(56, 147, 255, 1);
            margin:4px 7px 4px 0;
            &:last-child{
               margin-right: 0
            }
        }
        .noItem{
            // border-radius: 19px;
            // background-color: rgba(242, 242, 242, 1);
            color: rgba(166, 166, 166, 1);
            font-size: 12px;
            text-align: center;
            font-family: Roboto;
            // border: 1px solid rgba(217, 217, 217, 1);
        }
    }
    .hintText{
        color: rgba(166, 166, 166, 1);
        font-size: 14px;
    }
    .adminList{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .el-tag{
            width:69px;
            // height: 30px;
            // line-height: 30px;
            // border-radius: 19px;
            background-color: rgba(233, 243, 255,0);
            color: rgba(96, 98, 102, 1) !important;
            font-size: 12px;
            text-align: center;
            font-family: Roboto;
            border: 1px solid rgba(56, 147, 255, 0);
            padding: 0 11px !important;
            // margin:4px 8px 4px 0;
            .el-icon-close{
                right: 2px !important;
                border-radius: 50%;
                text-align: center;
                position: relative;
                cursor: pointer;
                font-size: 12px;
                height: 16px;
                width: 16px;
                line-height: 17px;
                vertical-align: middle;
                top: -1.5px;
                color: rgba(96, 98, 102, 1) !important;
            }
            .el-tag--small .el-icon-close {
                -webkit-transform: scale(0.9) !important;
                transform: scale(0.9) !important
            }
            .el-icon-close:hover::before{
                border-radius: 45%;
                background: rgba(241, 241, 241, 1) !important;
                border: none;
            }
        }
    }
    .button{
        color: rgba(12, 141, 254, 1);
        font-size: 12px;
        cursor: pointer;
    }
}
</style>